import React, { useEffect, useState } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import { connect } from 'react-redux'
import { Spin } from 'antd'
// 导入本地路由文件
import RightList from '../views/box/right-manage/RightList'
import RoleList from '../views/box/right-manage/RoleList'
import Home from '../views/box/home/Home'
import NotFound from '../views/box/notefound/NotFound'
import UserList from '../views/box/userlist/UserList'
import NewsAdd from '../views/box/news-manage/NewsAdd'
import NewsCategory from '../views/box/news-manage/NewsCategory'
import NewsDraft from '../views/box/news-manage/NewsDraft'
import NewsPreview from '../views/box/news-manage/NewsPreview'
import NewsUpdate from '../views/box/news-manage/NewsUpdate'
import Audit from '../views/box/audit-manage/Audit'
import AuditList from '../views/box/audit-manage/AuditList'
import Published from '../views/box/publish-manage/Published'
import Unpublished from '../views/box/publish-manage/Unpublished'
import Sunset from '../views/box/publish-manage/Sunset'

import { getRouterList } from '../api/boxApi'

// 本地路由文件的映射
const RouterMap = {
    // 首页
    '/home': Home,
    // 用户管理
    '/user-manage/list': UserList,
    // 权限管理
    '/right-manage/role/list': RoleList,
    '/right-manage/right/list': RightList,
    // 新闻管理
    '/news-manage/add': NewsAdd,
    '/news-manage/draft': NewsDraft,
    '/news-manage/category': NewsCategory,
    "/news-manage/preview/:id": NewsPreview,
    "/news-manage/update/:id": NewsUpdate,
    // 审核管理
    '/audit-manage/audit': Audit,
    '/audit-manage/list': AuditList,
    // 发布管理
    '/publish-manage/unpublished': Unpublished,
    '/publish-manage/published': Published,
    '/publish-manage/sunset': Sunset,
}

function BoxRouter(props) {
    const [routerList, setrouterList] = useState([])
    useEffect(() => {
        getRouterList().then((res) => {
            setrouterList(res.data)
        })
    }, [])
    // 判断该路由是否打开且在本地已配置
    const checkRoute = (item) => {
        // 首先本地可以匹配到后端传递来的路由
        // 其次pagepermisson的值和routepermisson的值也不能是0或不存在才能返回true
        // 显示在侧边的页面和详情等的路由级权限
        if (RouterMap[item.routeKey] && (item.pagepermisson || item.routepermisson)) {
            return true
        } else {
            return false
        }
    }
    const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
    // 判断登录账号是否包含该路径，只有包含此权限才能访问
    const checkUserPermission = (item) => {
        return rights.includes(item.routeKey)
    }
    return (
        <div>
            <Spin tip="Loading..." spinning={props.isLodaing}>
                <Switch>
                    {
                        // 通过map动态渲染路由
                        routerList.map(item => {
                            if (checkRoute(item) && checkUserPermission(item)) {
                                return (
                                    <Route path={item.routeKey} component={RouterMap[item.routeKey]} key={item.routeKey} exact />
                                )
                            } else {
                                return null
                            }

                        })
                    }
                    {/* 重定向 */}
                    <Redirect from='/' to='/home' exact />

                    {/* 匹配不存在的页面 */}
                    {
                        // 防止在刚进来时，数组是空值匹配到Notfonud页面
                        routerList.length > 0 && <Route path='*' component={NotFound} />
                    }

                </Switch>
            </Spin>
        </div>
    )
}

const mapStateToProps = (state) => { 
    return ({
        isLodaing:state.loadingReducer.isLodaing
    })
}

export default connect(mapStateToProps)(BoxRouter)